<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="root"></div>
<script src="../../javascript/react.js"></script>
<script src="../../javascript/react-dom.js"></script>
<script src="../../javascript/babel.js"></script>
<script type="text/babel">
    class App extends React.Component {
        constructor(props) {
            super(props)
            this.state={count:0}
        }

        render() {
            const {count}=this.state
            return (
                <div>
                <h1>当前计数为:{count}</h1>
                 <button onClick={this.changeCount(1)}>+1</button>
                 <button onClick={this.changeCount(-1)}>-1</button>

                </div>
            );
        }

        changeCount=(value)=>{
           return ()=>{
            /* 
            this.setState()可以传入两个参数：第一个参数：对象或者是回调函数，第二个参数：回调函数
            */
            this.setState(state=>({count:state.count+value}),()=>{
                console.log(this.state.count);
            })
           }
        }

    }
    const root = ReactDOM.createRoot(document.querySelector("#root"))
    root.render(<App/>)
</script>
</body>
</html>
